

<script setup>
import { useRoute } from 'vue-router';
import { ref } from 'vue';
import { useComon } from '../Hooks/comon';
import { useRouter } from 'vue-router';


const router = useRouter()
const { goback, gotowhere } = useComon()
const toback = () => {
    goback()
}
const showPopover = ref(false)
const route = useRoute()
const actions = ref([
    { text: '我的', icon: 'friends-o', path: '/user', disabled: route.path == '/user' },
    { text: '拍照', icon: 'photo-o', },
    { text: '扫码', icon: 'scan', },
    { text: '支付', icon: 'balance-pay', },
])

const search = () => {
    router.push('/search')
}

const selectIcon = (el) => {//点击icon跳转
    console.log(el);
    if (el.path) {
        gotowhere(el.path)
    }else{
        return
    }
}

const props = defineProps({   // 接受来自父组件的props 
    title: {
        type: String,
        default: '标题'
    },
    noback: {
        type: Boolean,
        default: false,  // false 有返回  取反
    }
})

</script>

<template>
    <van-nav-bar  :title="title" fixed placeholder="true">
        <template #left>
            <slot v-if="!noback">
                <!-- 组件内部的默认内容 -->
                <div class="flex" @click="toback">
                    <van-icon name="arrow-left" size="30" color="black" />
                    <span class="color" style="color:black">返回</span>
                </div>
            </slot>
        </template>

        <template #right>
            <slot name="rightbox">
                <van-icon name="search" size="40" color="black" class="search" @click="search" />
                <van-popover @select="selectIcon" v-model:show="showPopover" placement="bottom-end" theme="dark"
                    :actions="actions">
                    <template #reference>
                        <van-icon name="ellipsis" size="40" color="black" />
                    </template>
                </van-popover>
            </slot>
        </template>
    </van-nav-bar>
</template>

<style>
.search {
    margin-right: 10px;
}

.flex {
    display: flex;
    align-items: center;
}

.color {
    color: #1989fa;
}
</style>